昨天看完了@click，今天接著看「按鍵修飾符」吧！

按鍵修飾符

v-on可以幫我們監聽鍵盤事件，也就是說使用者能利用鍵盤按鍵來進行操作、互動，它的寫法為：<input v-on:keyup="">，當然也有簡寫了<input @keyup="">，老樣子，之後都會改為簡寫。

Vue很貼心的幫我們把常用按鍵取了簡易又直覺的名字，以下為清單(跟「事件修飾符」一樣，都是「點」開頭)：

• .enter
• .tab
• .delete(它包含了刪除跟退格鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

使用方法跟昨天的一樣簡單，馬上來個範例吧：

<template>
  <div>
    <input type="text" value="先點我再按下Enter" @keyup.enter="pop" />
  </div>
</template>

<script>
  export default {
    methods: {
      pop() {
        alert('完成按下Enter鍵')
      }
    }
  }
</script>

需使用<input />或<textarea></textarea>，以enter鍵為範例直接加入@keyup.enter="pop"，而pop是我自已為方法取的名字，你可以再照以上方法玩玩其它的事件修飾符喔！

剛剛說Vue替按鍵取了名字，那我可以自訂按鍵修飾符的名字嗎？可以的！而且我一次要設定兩個，方法如下：

const keyCodes = {
  a: 65,
  b: 66
}

以按鈕a為例子，它原本的鍵盤代碼為65，這種代碼難記又難認，將它命名為直覺的「a」是不是好多了！
至於其它鍵盤代碼是多少，可以直接到( https://keycode.info/ )這裡來查，在輸入框內按下你想查的按鈕，它會直接轉成代碼顯示在畫面喔！

其實不只鍵盤的按鍵可設定，滑鼠的當然也行，以下對應滑鼠「左鍵」、「右鍵」、「中鍵」：

• left
• right
• middle

做法像昨天學的一樣，例如：<button @click.left="pop">按我</button>。

系統修飾鍵

vue還有提供「系統修飾鍵」讓我們使用，這什麼？名字真難懂！簡單說就是你可以設定：

• .ctrl
• .alt
• .shift
• .meta

任選以上4個鍵其中一個 +「指定按鍵」觸發事件，不懂？馬上來個範例！
現在我設定「Ctrl + a」才能觸發事件

<template>
  <div>
    <input type="text" value="先點我再按下 Ctrl + a" @keyup.ctrl.65="pop" />
  </div>
</template>

<script>
  export default {
    methods: {
      pop() {
        alert('完成按下 Ctrl + a 鍵')
      }
    }
  }
</script>

如果用mac的朋友，記得按鍵上的對應喔：

• 在mac上：meta ==> command 鍵(⌘)。
• 在window上：meta ==> Windows logo鍵。

.exact修飾鍵

剛剛學完系統修飾鍵，那.exact又是什麼？它能更進一步控制「系統修飾鍵組合」觸發事件：

• <button @click.ctrl="pop">按鈕</button>一般情況，即使你多按了「alt鍵」或「shift鍵」，一樣能正常觸發事件。
• <button @click.ctrl.exact="pop">按鈕</button>多加上了.exact後，它會限制只有單按「ctrl鍵」才能觸發事件。
• <button @click.exact="pop">按鈕</button>單獨加上.exact後，它會限制不能按下任何「系統修飾鍵」。

今天的內容都看懂了嗎？學會了這兩天的內容，相信一定能讓網站有更多互動變化的可能！